﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <base target="_blank" />
    <style type="text/css">
        .pRed {
            color: Red;
        }

        .pBlue {
            color:blue;
        }
    </style>
</head>
<body>
    <p class="pRed">1：加载react.js和JSXTransformer.js很消耗时间，实际上线的时候，应该将它放到服务器完成</p>

    <p class="pRed">2：JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析. <a href="../Pages/demo2.html">详情demo2</a></p>

    <p class="pBlue">3：React.render第一个参数必须要为一个html闭合标签, it's important!!! <a href="../Pages/demo2.html">详情demo2</a></p>

    <p class="pRed">4：在React.render函数体里面是可以调用外部的function的,js逻辑代码必须写在{}里面 <a href="../Pages/demo2.html">详情demo2</a></p>

    <p class="pRed">5：当React自带的函数返回html标签的时候，比如为一整个闭合的标签,Adjacent JSX elements must be wrapped in an enclosing tag <a href="../Pages/demo2.html">详情demo2的map return的标签为一整个div</a></p>

    <p class="pBlue">6：当需要给React.render里面的html标签加样式，不能使用class，应该使用className! <a href="../Pages/demo1.html">详情demo1</a></p>

    <p class="pRed">7：React map遍历的使用 <a href="../Pages/demo2.html">详情demo2</a>
        React map循环出来的结果可以用变量来接收，是一个数组的形式
        <pre>var items = this.props.items.map(function(item){
                    return < input type="button" value={item} />;
                })
                content = < div>{items}< /div>;
                return content;
            </pre>
    </p>

    <p class="pBlue">8：React Component的组件类首字母必须要大写(不大写无法渲染), 访问组件属性必须是在this.props对象里面,class改为className，for改为htmlFor，因为这2个单词为js的保留字</p>

    <p class="pRed">9：React.render函数体的第一个参数可以为没有声明组件的的闭合标签, 也可以为HTML Tag标签, 不会报错<a href="../Pages/demo5.html">详情demo5</a></p>

    <p class="pRed">10：React.render是允许组件里面引用组件的，具体用法见<a href="../Pages/demo5.html">详情demo5</a></p>

    <p class="pRed">11：组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。</p>

    <p class="pRed">12：React.findDOMNode获取真实DOM，所以必须等到虚拟DOM插入文档后才能使用这个方法，否则返回NULL<a href="../Pages/demo6.html">详情demo6</a></p>

    <p class="pBlue">13：当this.setState变化的时候，自动重新Render这个组件<a href="../Pages/demo7.html">详情demo7</a></p>

    <p class="pRed">14：用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取<a href="../Pages/demo8.html">详情demo8</a></p>

    <p class="pBlue">15：componentWillMount(), componentDidMount(), componentWillUpdate(), componentDidUpdate(), componentWillUnmount()<a href="../Pages/demo9.html">详情demo9</a></p>

    <p class="pBlue">16：Ajax一般情况下写在componentDidMount函数体内，因为此时组件初始化完成! <a href="../Pages/demo10.html">详情demo10</a></p>

    <p class="pRed">17：React并不会通过String类型的Html片段生成DOM</p>
    <p class="pRed">18：在componentWillReceiveProps中调用setState()不会触发re-render</p>
    <p class="pRed">19：componentWillUpdate中不能调用this.setState()</p>
    <p class="pRed">20：在通过Ajax获取到数据，调用this.setState()之前，应该通过this.isMounted()确定当前的component已经处在渲染完成的阶段</p>
    <p class="pRed">21：父组件到子组件通过props传递数据，子组件向父组件传递数据通过global event方式来处理，即在root element上接受所有子组件的事件处理</p>
    <p class="pRed">22：移动设备的touch事件需手动开启：React.initializeTouchEvents(true)</p>
    <p class="pRed">23：setState(data, callback)中的callback是在re-render完成之后调用的</p>
    <p class="pRed">24：组件的变量名必须大写，用于区分原生的Html标签和自定义组件</p>
    <p class="pRed">25：用大括号包裹的js表达式来表示组件的属性，替代原生写法的双引号</p>
    <p class="pRed">26：如果想给最终装换成的HTML元素添加自定义的属性，必须用前缀"data-"</p>
    <p class="pRed">27：props应该作为不可变常量使用，不能component.props.foo = x 这样使用</p>
    <p class="pRed">28：<Component {…someObj} /> 可以将someObj中的所有属性写进Component的props中</p>
    <p class="pRed">29：<Component {…someObj} attr=“higherLevel" /> 中的attr属性会复写someObj中的同名属性</p>
    <p class="pRed">30：获取父级的属性用this.props，获取内嵌的子元素用this.props.children</p>
    <p class="pRed">31：为防止XSS攻击，提供安全性，在插入原生的HTML时需使用< span dangerouslySetInnerHTML={{__html: rawHtml}}></p>
    <p class="pRed">32：JSX封装了React的原生接口为类XML协议的语法，使之更加易于编写</p>
    <p class="pRed">33：通过this.transferPropsTo( subComponent ) 将当前组件的所有props传递给它的某个子组件，也可以通过{...this.props}的方式传递</p>
</body>
</html>
